<template>
  <div id="preloader" class="preloader">
    <div class='inner'>
      <div class='line1'></div>
      <div class='line2'></div>
      <div class='line3'></div>
    </div>
  </div>
  <section class="fxt-template-animation fxt-template-layout31">
    <span class="fxt-shape fxt-animation-active"></span>
    <div class="fxt-content-wrap">
      <div class="fxt-heading-content">
        <div class="fxt-inner-wrap">
          <div class="fxt-transformY-50 fxt-transition-delay-3">
            <a href="" class="fxt-logo">
              <img src="/static/picture/logo-31.png" alt="Logo">
            </a>
          </div>
          <div class="fxt-transformY-50 fxt-transition-delay-4">
            <h1 class="fxt-main-title">We're a Digital Agency.</h1>
          </div>
          <div class="fxt-login-option">
            <ul>
              <li class="fxt-transformY-50 fxt-transition-delay-6"><a href="#">Sing in with Google</a></li>
              <li class="fxt-transformY-50 fxt-transition-delay-7"><a href="#">Sing in with Facebook</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="fxt-form-content">
        <div class="fxt-page-switcher">
          <h2 class="fxt-page-title mr-3">Login</h2>
          <ul class="fxt-switcher-wrap">
            <li><a href="" class="fxt-switcher-btn active">Login</a></li>
            <li><a href="register-31.html" class="fxt-switcher-btn">Register</a></li>
          </ul>
        </div>
        <div class="fxt-main-form">
          <div class="fxt-inner-wrap">

              <div class="row">
                <div class="col-12">
                  <div class="form-group">
                    <input v-model="form.email" type="email" id="email" class="form-control" name="email" placeholder="Email" required="required">
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-group">
                    <input v-model="form.password" id="password" type="password" class="form-control" name="password" placeholder="********" required="required">
                    <i toggle="#password" class="fa fa-fw fa-eye toggle-password field-icon"></i>
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-group">
                    <div class="fxt-checkbox-wrap">
                      <div class="fxt-checkbox-box mr-3">
                        <input v-model="form.rem" name="rem" id="checkbox1" type="checkbox">
                        <label for="checkbox1" class="ps-4">Keep me logged in</label>
                      </div>
                      <a href="forgot-password-31.html" class="fxt-switcher-text">Forgot Password</a>
                    </div>
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-group">
                    <button @click="log" class="fxt-btn-fill">Log in</button>
                  </div>
                </div>
              </div>
            <div class="fxt-switcher-description">Don't have an account?
              <a href="register-31.html" class="fxt-switcher-text ms-1">Register</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import "/static/js/jquery-3.5.0.min"
import "/static/js/bootstrap.min"
import "/static/js/imagesloaded.pkgd.min"
import "/static/js/validator.min"
import "/static/js/main"
import axios from "axios";
import {ElMessage} from "element-plus";
export default {
  name: "login",
  mounted() {
    $('#preloader').fadeOut('slow', function() {
      console.log("wdawd")
      $(this).remove();
    });
  },
  data(){
    return{
      form:{}
    }
  },
  methods:{
    log(){
      console.log(this.form)
      axios.post("/api/login",this.form).then((res)=>{
        if (res.status===200 && res.data.code===100){
          localStorage.setItem("token",res.data.message)
          this.$router.push({name:"index"})
        }else if (res.data.code===200){
          ElMessage.error({message:"用户名密码不匹配"})
        }
      })
    }
  }
}
</script>

<style scoped>
@import "/static/css/bootstrap.min.css";
@import "/static/css/fontawesome-all.min.css";
@import "/static/css/flaticon.css";
@import "/static/css/css.css";
@import "/static/css/style.css";

</style>